﻿<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>{{l("ColumnInfo")}}</span>
                </h3>
            </div>
            <div class="col-sm-6 text-right">
                <audit-log serviceName="ColumnInfoAppService" objectName="Magicodes.Admin.Core.Custom.Contents.ColumnInfo"></audit-log>
                <button type="button" class="btn btn-success" (click)="exportToExcel()">
                    <i class="fa fa-file-excel-o"></i> {{l("ExportToExcel")}}
                </button>
                <button class="btn btn-primary blue" (click)="createColumnInfo()">
                    <i class="fa fa-plus"></i>{{l("Create")}}
                </button>
                <button type="button" class="btn btn-metal" (click)="getColumnInfos()">
                    <i class="fa fa-refresh"></i> {{l("Refresh")}}
                </button>
                <button type="button" class="btn default" (click)="getRecycleData()">
                    <i class="fa fa-recycle"></i> {{filters.isOnlyGetRecycleData?l('Close'):l('RecycleBin')}}
                </button>
                <button type="button" class="btn default" (click)="showOrdinaryTable()">
                    <i class="fa fa-table"></i> {{isShowTreeTable?l('OrdinaryTable'):l('TreeTable')}}
                </button>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="m-form m-form--label-align-right">
                    <form (submit)="getColumnInfos()" autocomplete="off">
                        <div class="row">
                            <div class="col-xl-6">
                                <label>{{l("Filter")}}</label>
                                <div class="input-group">
                                    <input [(ngModel)]="filters.filterText" name="Filter" class="form-control"
                                        placeholder="{{l('SearchWithThreeDot')}}" type="text">
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <label>{{l("Parent")}}</label>
                                <div class="input-group">
                                    <input [(ngModel)]="filters.parentId" name="ParentId" class="form-control" placeholder="{{l('SearchWithThreeDot')}}"
                                        type="text">
                                </div>
                            </div>
                            <div class="col-xl-6" style="margin-top: 15px;">
                                <label class="m-checkbox">
                                    <input [disabled]="filters.isFooterNav" (click)="onCheckbox()" id="EditColumnInfo_IsHeaderNav" type="checkbox"
                                        name="IsHeaderNav" [(ngModel)]="filters.isHeaderNav" [required]="false">
                                    {{l("IsHeaderNav")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="col-xl-6" style="margin-top: 15px;">
                                <label class="m-checkbox">
                                    <input #IsFooterNav id="EditColumnInfo_IsFooterNav" type="checkbox" name="IsFooterNav" [(ngModel)]="filters.isFooterNav"
                                        [required]="false">
                                    {{l("IsFooterNav")}}
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div *ngIf="advancedFiltersAreShown" class="row">
                            <div class="col-xl-6">
                                <div class="m-checkbox-list">
                                    <label class="m-checkbox">
                                        <input type="checkbox" [(ngModel)]="filters.creationDateRangeActive" id="articleTable_CreationDateRangeActive"
                                            name="CreationDateRangeActive" value="true">
                                        {{l('CreationTime')}}
                                        <span></span>
                                    </label>
                                </div>
                                <input class="form-control" name="CreationDateRange" [attr.disabled]="!filters.creationDateRangeActive ? 'disabled' : null"
                                    #drpCreationDateRange="bsDaterangepicker" bsDaterangepicker dateRangePickerInitialValue readonly="readonly"
                                    [(ngModel)]="creationDateRange">
                            </div>

                            <div class="col-xl-6">
                                <div class="m-checkbox-list">
                                    <label class="m-checkbox">
                                        <input type="checkbox" [(ngModel)]="filters.updateDateRangeActive" id="articleTable_UpdateDateRangeActive"
                                            name="UpdateDateRangeActive" value="true">
                                        {{l('UpdateDateRange')}}
                                        <span></span>
                                    </label>
                                </div>
                                <input class="form-control" name="UpdateDateRange" [attr.disabled]="!filters.updateDateRangeActive ? 'disabled' : null"
                                    #drpCreationDateRange="bsDaterangepicker" bsDaterangepicker dateRangePickerInitialValue readonly="readonly"
                                    [(ngModel)]="updateDateRange">
                            </div>
                            <div class="col-md-6">
                                <label for="SubmenuToggle">{{l("IsActive")}}</label>
                                <select id="IsActive" name="IsActive" class="form-control" [(ngModel)]="filters.isActive">
                                    <option value="all">{{l("All")}}</option>
                                    <option value="yes">{{l("Yes")}}</option>
                                    <option value="no">{{l("No")}}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="SubmenuToggle">{{l("IsNeedAuthorizeAccess")}}</label>
                                <select id="IsNeedAuthorizeAccess" name="IsNeedAuthorizeAccess" class="form-control"
                                    [(ngModel)]="filters.isNeedAuthorizeAccess">
                                    <option value="all">{{l("All")}}</option>
                                    <option value="yes">{{l("Yes")}}</option>
                                    <option value="no">{{l("No")}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="row m--margin-bottom-10">
                            <div class="col-sm-6">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
                                    <i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}
                                </span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
                                    <i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}
                                </span>
                            </div>
                        </div>
                    </form>
                </div>

                <!--<Primeng-TreeTable-Start>-->
                <div class="row align-items-center" *ngIf="isShowTreeTable">
                    <div class="primeng-datatable-container">
                        <p-treeTable [value]="list" [paginator]="false" [lazy]="false" [loading]="loading" [scrollable]="true"
                            [style]="{width:'100%'}" (onNodeExpand)="onNodeExpand($event)">
                            <ng-template pTemplate="header" let-columns>
                                <tr>
                                    <th style="width:110px"></th>
                                    <th style="width:200px">{{l('Actions')}}</th>
                                    <th [ttSortableColumn]="'title'" style="width:200px">{{l('Title')}}
                                        <p-treeTableSortIcon field="title"></p-treeTableSortIcon>
                                    </th>
                                    <th [ttSortableColumn]="'code'" style="width:300px">{{l('Code')}}
                                        <p-treeTableSortIcon field="code"></p-treeTableSortIcon>
                                    </th>
                                    <th [ttSortableColumn]="'columnType'" style="width:150px">{{l('ColumnType')}}
                                        <p-treeTableSortIcon field="columnType"></p-treeTableSortIcon>
                                    </th>
                                    <th [ttSortableColumn]="'isActive'" style="width:200px">{{l('IsActive')}}
                                        <p-treeTableSortIcon field="isActive"></p-treeTableSortIcon>
                                    </th>
                                    <th [ttSortableColumn]="'isNeedAuthorizeAccess'" style="width:200px">{{l('IsNeedAuthorizeAccess')}}
                                        <p-treeTableSortIcon field="isNeedAuthorizeAccess"></p-treeTableSortIcon>
                                    </th>
                                    <th style="width:200px">{{l('Cover')}}</th>
                                    <th style="width:600px">{{l('PictureManage')}}</th>
                                    <th [ttSortableColumn]="'url'" style="width:200px">{{l('Url')}}
                                        <p-treeTableSortIcon field="url"></p-treeTableSortIcon>
                                    </th>
                                    <th [ttSortableColumn]="'creationTime'" style="width:200px">{{l('CreationTime')}}
                                        <p-treeTableSortIcon field="creationTime"></p-treeTableSortIcon>
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                                <tr>
                                    <td style="width: 110px">
                                        <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
                                    </td>
                                    <td style="width: 200px">
                                        <button class="btn btn-sm btn-primary" *ngIf="!rowData.isDeleted && !rowData.isStatic"
                                            (click)="editColumnInfo(rowData.id)">
                                            {{l('Edit')}}
                                        </button>
                                        <button class="btn btn-sm" *ngIf="!rowData.isDeleted && !rowData.isStatic"
                                            (click)="deleteColumnInfo(rowData.id)">
                                            {{l('Delete')}}
                                        </button>
                                        <button class="btn btn-sm btn-primary" *ngIf="!rowData.isDeleted" (click)="fileUploadModal.show(rowData.id)">
                                            {{l('PictureManage')}}
                                        </button>
                                        <button class="btn btn-sm btn-primary" *ngIf="rowData.isDeleted" (click)="restore(rowData.id)">
                                            {{l('Restore')}}
                                        </button>
                                    </td>
                                    <!-- <td style="width: 130px">
                                        <div class="btn-group dropdown" normalizePosition>
                                            <button class="dropdown-toggle btn btn-sm btn-primary" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-cog"></i>
                                                <span class="caret"></span> {{l("Actions")}}
                                            </button>
                                            <ul class="dropdown-menu" *ngIf="!rowData.isDeleted">
                                                <li>
                                                    <a (click)="editDistrictInfo(rowData.id)">{{l('Edit')}}</a>
                                                </li>
                                                <li>
                                                    <a (click)="deleteDistrictInfo(rowData.id)">{{l('Delete')}}</a>
                                                </li>
                                                <li>
                                                    <a (click)="fileUploadModal.show(rowData.id)">{{l('PictureManage')}}</a>
                                                </li>
                                            </ul>
                                            <ul class="dropdown-menu" *ngIf="rowData.isDeleted">
                                                <li>
                                                    <a (click)="restore(rowData.id)">{{l('Restore')}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td> -->
                                    <td style="width:200px">
                                        {{rowData.title}}
                                        <span *ngIf="rowData.isStatic" class="m-badge m-badge--brand m-badge--wide"
                                            data-toggle="tooltip" title="{{l('StaticColumnInfo_Tooltip')}}"
                                            data-placement="top">
                                            {{l('Static')}}
                                        </span>
                                    </td>
                                    <td style="width:300px">
                                        {{rowData.code}}
                                    </td>
                                    <td style="width:150px">
                                        {{getColumnTypeText(rowData.columnType)}}
                                    </td>
                                    <td style="width:200px">
                                        <p-inputSwitch (onChange)="handleIsActiveSwitch($event,rowData.id)" [(ngModel)]="rowData.isActive"></p-inputSwitch>
                                    </td>
                                    <td style="width:200px">
                                        <p-inputSwitch (onChange)="handleIsNeedAuthorizeAccessSwitch($event,rowData.id)"
                                            [(ngModel)]="rowData.isNeedAuthorizeAccess"></p-inputSwitch>
                                    </td>
                                    <td style="width:200px">
                                        <object-imageList objectTypeName="ColumnInfo" [(objectId)]="rowData.id"
                                            isCover="true"></object-imageList>
                                    </td>
                                    <td style="width:600px">
                                        <object-imageList objectTypeName="ColumnInfo" [(objectId)]="rowData.id"
                                            isCover="false"></object-imageList>
                                    </td>
                                    <td style="width:200px">{{rowData.url}}</td>
                                    <td style="width:200px">
                                        {{ rowData.creationTime ? (rowData.creationTime | momentFormat:'L LT') : '-'}}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-treeTable>
                    </div>
                </div>
                <!--<Primeng-TreeTable-End>-->

                <div class="row align-items-center" *ngIf="!isShowTreeTable">
                    <!--<Primeng-Datatable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <p-table #dataTable (onLazyLoad)="getColumnInfos($event)" [value]="primengTableHelper.records"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [responsive]="primengTableHelper.isResponsive" [scrollable]="true" [style]="{width:'100%'}"
                            (onRowReorder)="getReorder($event)">
                            <ng-template pTemplate="header">
                                <tr>
                                    <!-- <th style="width:30px"></th> -->
                                    <th style="width:200px">{{l('Actions')}}</th>
                                    <th pSortableColumn="title" style="width:200px">{{l('Title')}}
                                        <p-sortIcon field="title"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="code" style="width:200px">{{l('Code')}}
                                        <p-sortIcon field="code"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="columnType" style="width:200px">{{l('ColumnType')}}
                                        <p-sortIcon field="columnType"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="isActive" style="width:200px">{{l('IsActive')}}
                                        <p-sortIcon field="isActive"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="isNeedAuthorizeAccess" style="width:200px">{{l('IsNeedAuthorizeAccess')}}
                                        <p-sortIcon field="isNeedAuthorizeAccess"></p-sortIcon>
                                    </th>
                                    <th style="width:200px">{{l('Cover')}}</th>
                                    <th style="width:600px">{{l('PictureManage')}}</th>
                                    <th pSortableColumn="url" style="width:200px">{{l('Url')}}
                                        <p-sortIcon field="url"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="creationTime" style="width:200px">{{l('CreationTime')}}
                                        <p-sortIcon field="creationTime"></p-sortIcon>
                                    </th>
                                </tr>
                            </ng-template>

                            <ng-template pTemplate="body" let-record="$implicit" let-index="rowIndex">
                                <tr [pReorderableRow]="index">
                                    <!-- <td style="width:30px">
                                        <i class="fa fa-arrows" title="{{l('DragAndDropSortTip')}}"
                                            pReorderableRowHandle></i>
                                    </td> -->
                                    <td style="width: 200px">
                                        <button class="btn btn-sm btn-primary" *ngIf="!record.isDeleted && !record.isStatic"
                                            (click)="editColumnInfo(record.id)">
                                            {{l('Edit')}}
                                        </button>
                                        <button class="btn btn-sm" *ngIf="!record.isDeleted && !record.isStatic"
                                            (click)="deleteColumnInfo(record.id)">
                                            {{l('Delete')}}
                                        </button>
                                        <button class="btn btn-sm btn-primary" *ngIf="!record.isDeleted" (click)="fileUploadModal.show(record.id)">
                                            {{l('PictureManage')}}
                                        </button>
                                        <button class="btn btn-sm btn-primary" *ngIf="record.isDeleted" (click)="restore(record.id)">
                                            {{l('Restore')}}
                                        </button>
                                    </td>
                                    <td style="width:200px">
                                        {{record.title}}
                                        <span *ngIf="record.isStatic" class="m-badge m-badge--brand m-badge--wide"
                                            data-toggle="tooltip" title="{{l('StaticColumnInfo_Tooltip')}}"
                                            data-placement="top">
                                            {{l('Static')}}
                                        </span>
                                    </td>
                                    <td style="width:200px">
                                        {{record.code}}
                                    </td>
                                    <td style="width:150px">
                                        {{getColumnTypeText(record.columnType)}}
                                    </td>
                                    <td style="width:200px">
                                        <p-inputSwitch (onChange)="handleIsActiveSwitch($event,record.id)" name="IsActive"
                                            [(ngModel)]="record.isActive"></p-inputSwitch>
                                    </td>
                                    <td style="width:200px">
                                        <p-inputSwitch (onChange)="handleIsNeedAuthorizeAccessSwitch($event,record.id)"
                                            name="IsActive" [(ngModel)]="record.isNeedAuthorizeAccess"></p-inputSwitch>
                                    </td>
                                    <td style="width:200px">
                                            <object-imageList objectTypeName="ColumnInfo" [(objectId)]="record.id"
                                            isCover="true"></object-imageList>
                                    </td>
                                    <td style="width:600px">
                                        <object-imageList objectTypeName="ColumnInfo" [(objectId)]="record.id" isCover="false"></object-imageList>
                                    </td>
                                    <td style="width:200px">{{record.url}}</td>
                                    <td style="width:200px">
                                        {{ record.creationTime ? (record.creationTime | momentFormat:'L LT') : '-'}}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>

                        <div class="primeng-paging-container">
                            <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #paginator
                                (onPageChange)="getColumnInfos($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-TurboTable-End>-->
                </div>





            </div>
        </div>
    </div>

    <createOrEditColumnInfoModal #createOrEditColumnInfoModal (modalSave)="RefreshTable()"></createOrEditColumnInfoModal>
    <fileUploadModal #fileUploadModal objectTypeName="ColumnInfo"></fileUploadModal>
</div>